<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>OAL</title>
    <link rel="stylesheet" href="../../common/css/bootstrap.min.css">
    <link rel="stylesheet"  href="../../common/css/daterangepicker.min.css">
    <link rel="stylesheet" href="../../common/css/standard.css">

</head>

<body>
<div class="oal-page">
    <!--Content -->
    <div class="oal-page-content-section">
        <!-- Header -->
        <!-- Content -->
        <div class="oal-form-content">
                <div class="oal-page-content-booking-section">
                    <div class="oal-form-content-center-section">
                        <div class="oal-booking-form-title">
                            <i class="fa fa-check-anchor"></i> Create Booking
                        </div>
                        <div class="booking-form-frame">
                            <div class="oal-booking-section">
                                <!--Create Booking -->

                                <div  class="form-horizontal search-group">
                                    <div class="row search-fields">
                                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" >
                                                <span class="oal-booking-container-title text-nowrap">From</span><span class="required"> * </span>
                                                    <input type="text" class="required-field input-large form-control"   placeholder="POR" id="search_por">
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" >
                                            <span class="oal-booking-container-title text-nowrap">To</span> <span class="required"> * </span>
                                            <input type="text" class="required-field input-large form-control"  placeholder="FND"  id="search_fnd">
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6" >
                                            <span class="oal-booking-container-title text-nowrap">Outbound Haulage</span>
                                            <div>
                                                <label class="label-haulage"><input type="radio" name="rdOBhaulage" value="CY"> CY</label>
                                                <label class="label-haulage"><input type="radio" name="rdOBhaulage" value="Door" checked> Door</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6" >
                                            <span class="oal-booking-container-title text-nowrap">Inbound Haulage</span>
                                            <div>
                                                <label class="label-haulage"><input type="radio" name="rdIBhaulage" value="CY" checked> CY</label>
                                                <label class="label-haulage"><input type="radio" name="rdIBhaulage" value="Door"> Door</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" >
                                            <span class="oal-booking-container-title text-nowrap">Sailing ( +/- 2 weeks )</span> <span class="required"> * </span>
                                            <div class="input-group oal-datepicker">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cutoff Date <span class="caret"></span></button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">Cutoff Date</a></li>
                                                        <li><a href="#">Loading Date</a></li>
                                                        <li><a href="#">ETD</a></li>
                                                        <li><a href="#">ETA</a></li>
                                                    </ul>
                                                </div><!-- /btn-group -->
                                                <input id="search_date_from" type="text" class="required-field form-control date-range-box"  value="" placeholder="">
                                                        <span class="input-group-addon">
                                                            <span class="glyphicon glyphicon-calendar"></span>
                                                        </span>
                                            </div>
                                        </div>


                                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" >
                                            <span class="oal-booking-container-title text-nowrap">Commodity</span><span class="required"> * </span>
                                            <input type="text" class="required-field input-large form-control"   placeholder="Commodity">
                                        </div>

                                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" >
                                            <span class="oal-booking-container-title text-nowrap">Cargo Nature</span>
                                            <select class="form-control">
                                                <option>General</option>
                                                <option>Dangerous</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 section-label text-left"></div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <ul class="oal-booking-container-list">
                                                <li class="oal-booking-container-list-item">
                                                    <div class="row">
                                                        <div class="col-lg-2  col-sm-2 col-md-2 col-xs-3">
                                                            <span class="oal-booking-container-title text-nowrap">
                                                            20 GP
                                                            </span>
                                                            <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-minus add-on-icon"></span> </button>
                                                                </span>
                                                <input type="text" class="form-control oal-booking-container-number" aria-label="Number of container to be added" value="0">
                                                                <span class="input-group-btn">
                                                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus add-on-icon"></span></button>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-2  col-sm-2 col-md-2 col-xs-6">
                                                             <span class="oal-booking-container-title text-nowrap">
                                                                Gross Weight
                                                                </span><span class="required"> * </span>
                                                            <div class="input-group">
                                                                <input type="text" class="input-large form-control oal-booking-container-number"   placeholder="Gross weight">
                                                                <div class="input-group-btn">
                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KGs <span class="caret"></span></button>
                                                                    <ul class="dropdown-menu">
                                                                        <li><a href="#">KGs</a></li>
                                                                        <li><a href="#">Pounds</a></li>
                                                                        <li><a href="#">Tons</a></li>
                                                                    </ul>
                                                                </div><!-- /btn-group -->
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-4  col-sm-4 col-md-4 col-xs-6 booking-door-info">

                                                            <span class="oal-booking-container-title text-nowrap">Appointment Address</span><span class="required"> * </span>
                                                            <input type="text" class="input-large form-control"   placeholder="Address">

                                                        </div>
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 booking-door-info" >
                                                            <span class="oal-booking-container-title text-nowrap">Date & Time</span><span class="required"> * </span>
                                                            <div class="input-group oal-datepicker">
                                                                <input id="search_date_door1" type="text" class="form-control date-time-box"  value="" placeholder="">
                                                            <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                                                            </div>
                                                        </div>
                                                        <div class="oal-booking-container-list-item-action ">
                                                            <div class="glyphicon glyphicon-repeat add-on-icon" aria-hidden="true" title="Reset"></div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="oal-booking-container-list-item">
                                                    <div class="row">
                                                        <div class="col-lg-2 col-sm-2 col-md-2 col-xs-3">
                                                            <span class="oal-booking-container-title text-nowrap">
                                                            40 GP
                                                            </span>
                                                            <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-minus add-on-icon"></span> </button>
                                                                </span>
                                                                <input type="text" class="form-control oal-booking-container-number" aria-label="Number of container to be added" value="0">
                                                                <span class="input-group-btn">
                                                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus add-on-icon"></span></button>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-2  col-sm-2 col-md-2 col-xs-6">
                                                             <span class="oal-booking-container-title text-nowrap">
                                                                Gross Weight
                                                                </span><span class="required"> * </span>
                                                            <div class="input-group">
                                                                <input type="text" class="input-large form-control oal-booking-container-number"   placeholder="Gross weight">
                                                                <div class="input-group-btn">
                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KGs <span class="caret"></span></button>
                                                                    <ul class="dropdown-menu">
                                                                        <li><a href="#">KGs</a></li>
                                                                        <li><a href="#">Pounds</a></li>
                                                                        <li><a href="#">Tons</a></li>
                                                                    </ul>
                                                                </div><!-- /btn-group -->
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-4  col-sm-4 col-md-4 col-xs-6 booking-door-info">

                                                            <span class="oal-booking-container-title text-nowrap">Appointment Address</span><span class="required"> * </span>
                                                            <input type="text" class="input-large form-control"   placeholder="Address">

                                                        </div>
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 booking-door-info" >
                                                            <span class="oal-booking-container-title text-nowrap">Date & Time</span><span class="required"> * </span>
                                                            <div class="input-group oal-datepicker">
                                                                <input id="search_date_door2" type="text" class="form-control date-time-box"  value="" placeholder="">
                                                            <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                                                            </div>
                                                        </div>
                                                        <div class="oal-booking-container-list-item-action ">
                                                            <div class="glyphicon glyphicon-repeat add-on-icon" aria-hidden="true" title="Reset"></div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="oal-booking-container-list-item">
                                                    <div class="row">
                                                        <div class="col-lg-2  col-sm-2 col-md-2 col-xs-3">
                                                            <span class="oal-booking-container-title text-nowrap">
                                                            40 HQ
                                                            </span>
                                                            <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-minus add-on-icon"></span> </button>
                                                                </span>
                                                                <input type="text" class="form-control oal-booking-container-number" aria-label="Number of container to be added" value="0">
                                                                <span class="input-group-btn">
                                                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus add-on-icon"></span></button>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-2  col-sm-2 col-md-2 col-xs-6">
                                                            <span class="oal-booking-container-title text-nowrap">
                                                                Gross Weight
                                                                </span><span class="required"> * </span>
                                                            <div class="input-group">

                                                                <input type="text" class="input-large form-control oal-booking-container-number"   placeholder="Gross weight">
                                                                <div class="input-group-btn">
                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KGs <span class="caret"></span></button>
                                                                    <ul class="dropdown-menu">
                                                                        <li><a href="#">KGs</a></li>
                                                                        <li><a href="#">Pounds</a></li>
                                                                        <li><a href="#">Tons</a></li>
                                                                    </ul>
                                                                </div><!-- /btn-group -->
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-4  col-sm-4 col-md-4 col-xs-6 booking-door-info">

                                                            <span class="oal-booking-container-title text-nowrap">Appointment Address</span><span class="required"> * </span>
                                                            <input type="text" class="input-large form-control"   placeholder="Address">

                                                        </div>
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 booking-door-info" >
                                                            <span class="oal-booking-container-title text-nowrap">Date & Time</span><span class="required"> * </span>
                                                            <div class="input-group oal-datepicker">
                                                                <input id="search_date_door3" type="text" class="form-control date-time-box"  value="" placeholder="">
                                                            <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                                                            </div>
                                                        </div>
                                                        <div class="oal-booking-container-list-item-action ">
                                                            <div class="glyphicon glyphicon-repeat add-on-icon" aria-hidden="true" title="Reset"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                            </ul>
                                        </div>

                                    </div>
                                    <ul class="oal-schedule-list">
                                        <li class="oal-schedule-list-item">
                                            <div class="row">
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                    <div class="schedule-date">
                                                        <div class="schedule-date-mon">AUG</div>
                                                        <div class="schedule-date-day">2</div>
                                                        <div class="schedule-date-label">ETD</div>
                                                    </div>
                                                    <div  class="oal-booking-preview-title">10:00 AM</div>
                                                    <div>Sowerby Bridge (GB)</div>

                                                </div>
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center text-nowrap">
                                                    <span class="direct-flag">Direct </span> <span class="transition-days"> 19 days</span>
                                                    <div class="oal-booking-preview-arrow-box">
                                                    </div>
                                                    <div class="oal-booking-preview-title text-nowrap">Vessel Voyage</div>
                                                    <span>OOCL KOREA 49W06</span>
                                                    <div class="oal-booking-preview-title text-nowrap">CY Cutoff</div>
                                                    <span>01 Aug 2016 12:00 PM</span>

                                                </div>

                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                    <div class="schedule-date">
                                                        <div class="schedule-date-mon">AUG</div>
                                                        <div class="schedule-date-day">21</div>
                                                        <div class="schedule-date-label">ETA</div>
                                                    </div>
                                                    <div  class="oal-booking-preview-title">11:00 AM</div>
                                                    <div>Shanghai (CN)</div>
                                                </div>

                                                <div class="btn-book-now">
                                                    <span>Book Now</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="oal-schedule-list-item">
                                            <div class="row">
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                    <div class="schedule-date">
                                                        <div class="schedule-date-mon">AUG</div>
                                                        <div class="schedule-date-day">9</div>
                                                        <div class="schedule-date-label">ETD</div>
                                                    </div>
                                                    <div  class="oal-booking-preview-title">10:00 AM</div>
                                                    <div>Sowerby Bridge (GB)</div>

                                                </div>
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center text-nowrap">
                                                    <span class="direct-flag">Direct </span> <span class="transition-days"> 21 days</span>
                                                    <div class="oal-booking-preview-arrow-box">
                                                    </div>
                                                    <div class="oal-booking-preview-title text-nowrap">Vessel Voyage</div>
                                                    <span>OOCL KOREA 49W06</span>
                                                    <div class="oal-booking-preview-title text-nowrap">CY Cutoff</div>
                                                    <span>08 Aug 2016 12:00 PM</span>

                                                </div>

                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                    <div class="schedule-date">
                                                        <div class="schedule-date-mon">AUG</div>
                                                        <div class="schedule-date-day">21</div>
                                                        <div class="schedule-date-label">ETA</div>
                                                    </div>
                                                    <div  class="oal-booking-preview-title">11:00 AM</div>
                                                    <div>Shanghai (CN)</div>
                                                </div>
                                                <div class="btn-book-now">
                                                    <span>Book Now</span>
                                                </div>
                                            </div>

                                        </li>
                                        <li class="oal-schedule-list-item">
                                            <div class="row">

                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                    <div class="schedule-date">
                                                        <div class="schedule-date-mon">AUG</div>
                                                        <div class="schedule-date-day">20</div>
                                                        <div class="schedule-date-label">ETD</div>
                                                    </div>
                                                    <div  class="oal-booking-preview-title">10:00 AM</div>
                                                    <div>Sowerby Bridge (GB)</div>

                                                </div>
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center text-nowrap">
                                                    <span class="direct-flag">Direct </span> <span class="transition-days"> 20 days</span>
                                                    <div class="oal-booking-preview-arrow-box">
                                                    </div>
                                                    <div class="oal-booking-preview-title text-nowrap">Vessel Voyage</div>
                                                    <span>OOCL QINGDAO 42E16</span>
                                                    <div class="oal-booking-preview-title text-nowrap">CY Cutoff</div>
                                                    <span>19 Aug 2016 12:00 PM</span>

                                                </div>

                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                    <div class="schedule-date">
                                                        <div class="schedule-date-mon">SEP</div>
                                                        <div class="schedule-date-day">9</div>
                                                        <div class="schedule-date-label">ETA</div>
                                                    </div>
                                                    <div  class="oal-booking-preview-title">11:00 AM</div>
                                                    <div>Shanghai (CN)</div>
                                                </div>
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-right">
                                                    <div class="btn-book-now">
                                                        <span>Book Now</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>

                                </div>

                                <div class="text-center oal-page-content-setting-action-bar hide">
                                    <a class="btn btn-default oal-page-content-button" href="instantbooking.html"> <span class="glyphicon glyphicon-repeat"></span> Reset</a>

                                    <button type="button" id="btnSearchBook" class="btn oal-page-highlight-btn"><span class="glyphicon glyphicon-search"></span> Book</button>

                                </div>

                            </div>
                            <div class="oal-booking-preview-section">
                                <div class="oal-booking-preview-details">

                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="alert alert-info booking-success" role="alert">
                                                <!--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 success-icon text-right">
                                                        <i class="fa fa-check-circle"></i>
                                                    </div>
                                                    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-8">
                                                        <p class="title">Thank you!</p>
                                                        <p>Your booking <span class="booking-number">#12345678</span> is received. Please check your e-mail mikki.yuen@oocl.com
                                                            <br>If you don't receive booking acknowledgement in 3 working days, please contact us to help you.
                                                        </p>
                                                        <p><span class="second-count">10</span> seconds back to homepage</p>

                                                    </div>
                                                </div>


                                            </div>

                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 booking-detail-title">Booking Details</div>

                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">From</div>
                                            <span>Sowerby Bridge(GB)</span>
                                        </div>

                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">To</div>
                                            <span>Owosso (US)</span>

                                        </div>

                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">Outbound Haulage</div>
                                            <span>Door</span>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">Commodity</div>
                                            <span>Toy</span>
                                        </div>

                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">Appointment Address</div>
                                            <span>Lakeside 2, 10 Science Park West Avenue</span>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">Appointment Date</div>
                                            <span>09 Aug 2016 2:00 PM</span>
                                        </div>


                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                                            <div class="group-title text-nowrap">Schedule</div>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                <div class="schedule-date">
                                                    <div class="schedule-date-mon">AUG</div>
                                                    <div class="schedule-date-day">9</div>
                                                    <div class="schedule-date-label">ETD</div>
                                                </div>
                                                <div  class="oal-booking-preview-title">10:00 AM</div>
                                                <div>Sowerby Bridge (GB)</div>

                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center text-nowrap">
                                                <span class="direct-flag">Direct </span> <span class="transition-days"> 20 days</span>
                                                <div class="oal-booking-preview-arrow-box">
                                                </div>
                                                <div class="oal-booking-preview-title text-nowrap">Vessel Voyage</div>
                                                <span>OOCL KOREA 49W06</span>
                                                <div class="oal-booking-preview-title text-nowrap">CY Cutoff</div>
                                                <span>08 Aug 2016 12:00 PM</span>

                                            </div>

                                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
                                                <div class="schedule-date">
                                                    <div class="schedule-date-mon">AUG</div>
                                                    <div class="schedule-date-day">21</div>
                                                    <div class="schedule-date-label">ETA</div>
                                                </div>
                                                <div  class="oal-booking-preview-title">11:00 AM</div>
                                                <div>Shanghai (CN)</div>
                                            </div>
                                        </div>
<!--
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">Vessel Voyage</div>
                                            <span>OOCL KOREA 49W06</span>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">CY Cutoff</div>
                                            <span>08 Aug 2016 12:00 PM</span>
                                        </div>

-->

                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                                            <div class="group-title text-nowrap">Containers</div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">20GP </div><div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"><i class="fa fa-times"></i> 2</div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">40GP </div><div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"><i class="fa fa-times"></i> 4</div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                                            <div class="group-title text-nowrap">Freight Rates (* Included BAF, THC)</div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">Total </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-right">20 GP</div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-right">40 GP</div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-right">40 HQ</div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">&nbsp;</div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">USD $ </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-right">600</div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-right">800</div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-right">1000</div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">&nbsp;</div>

                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                                            <div class="group-title text-nowrap">Surcharge Detail</div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">Detention / Demurrage at Origin</div>
                                            <span>15 Days / 20 Days</span>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                                            <div class="oal-booking-preview-title text-nowrap">Detention / Demurrage at Destination</div>
                                            <span>15 Days / 20 Days</span>
                                        </div>

                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center oal-page-content-setting-action-bar">
                                            <button class="btn btn-default oal-page-content-button"  id="btnBacktoBooking" ><i class="fa fa-undo"></i> Back</button>
                                            <button type="button" id="btnConfirmBooking" class="btn oal-page-highlight-btn"><i class="fa fa-check"></i> Confirm Booking</button>
                                        </div>
                                    </div>


                                </div>


                            </div>
                        </div>


                    </div>

                </div>
        </div>



    </div>

    <!-- Chat -->
</div>


<!--include JS File -->
<script src="../../common/js/jquery-1.12.4.js"></script>
<script src="../../common/js/bootstrap.js"></script>
<script src="../../common/js/dateRangePicker/moment.js"></script>
<script src="../../common/js/dateRangePicker/jquery.daterangepicker.js"></script>
<script src="../../common/js/bootstrap.combobox.js"></script>
<script src="../controler/instantbooking.js"></script>


</body>


</html>